<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { getCompanyGroup } from "@/api/user";
import {
  myCompany,
  createGroup,
  deleteGroup,
  updateGroup
} from "@/api/company";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
defineOptions({
  name: "corporateStructure"
});
let state = reactive({
  companyDetails: {},
  tree: [],
  allGroup: [],
  groupDialogVisible: false,
  groupForm: {
    name: "",
    pid: 0
  },
  EditGroupDialogVisible: false,
  editGroupForm: {
    id: 0,
    name: "",
    pid: 0
  }
});
// 添加部门
const addGroupDialog = () => {
  state.groupDialogVisible = true;
};
//添加部门
const addGroup = async () => {
  state.groupForm.pid = state.companyDetails.id;
  const result = await createGroup(state.groupForm);
  console.log(result);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: "添加部门成功"
    });
    state.groupDialogVisible = false;
    initData();
  } else {
    ElMessage({
      type: "warning",
      message: "添加部门失败"
    });
  }
  console.log(state.groupForm);
};
//删除部门
const handleDeleteClick = (id: BigInt) => {
  console.log(id);
  ElMessageBox.confirm("是否删除部门", "删除部门", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      deleteGroup(id).then(res => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: "删除成功"
          });
          state.tree = [];
          initData();
        } else {
          ElMessage({
            type: "warning",
            message: "删除失败"
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled"
      });
    });
};
//搜索
const onSearch = () => {};
// 展示编辑部门对话框
const handleEdit = id => {
  state.EditGroupDialogVisible = true;
  state.editGroupForm.id = id;
  state.editGroupForm.pid = state.companyDetails.id;
  state.allGroup.forEach(i => {
    if (i.id == id) {
      state.editGroupForm.name = i.name;
    }
  });
};
//编辑部门editGroup
const editGroup = async () => {
  state.groupForm.pid = state.companyDetails.id;
  const result = await updateGroup(state.editGroupForm);
  console.log(result);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: "编辑部门成功"
    });
    state.EditGroupDialogVisible = false;
    state.tree = [];
    initData();
  } else {
    ElMessage({
      type: "warning",
      message: "编辑部门失败"
    });
  }
  console.log(state.editGroupForm);
};
const initData = async () => {
  const result = await myCompany();
  if (result.code == 200) {
    state.companyDetails = result.data;
  }
  const res1 = await getCompanyGroup();

  console.log(res1);
  if (res1.code == 200) {
    console.log(res1);
    state.allGroup = res1.data;
    let tree = {};
    tree.id = state.companyDetails.id;
    tree.name = state.companyDetails.name;
    tree.type = "公司";
    res1.data.forEach(i => {
      i.type = "部门";
    });
    tree.children = res1.data;

    state.tree.push(tree);
    console.log(state.companyDetails);
    console.log(state.tree);
    // state.userList = res.data;
  }
};
onMounted(() => {
  initData();
});
</script>

<template>
  <div>
    <div style="display: flex; margin-bottom: 7px">
      <el-input
        v-model="state.search"
        style="width: 199px; margin-right: 20px"
        placeholder="请输入用户名称"
        clearable
      />
      <el-button type="primary" :icon="Search" @click="onSearch">
        搜索
      </el-button>
      <el-button type="primary" @click="addGroupDialog"> 新增部门 </el-button>
    </div>
    <el-table
      :data="state.tree"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column type="index" label="序列" sortable />
      <el-table-column prop="name" label="部门名称" sortable />
      <el-table-column prop="type" label="类型" sortable />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button
            :icon="Delete"
            link
            type="danger"
            size="small"
            @click="handleDeleteClick(scope.row.id)"
            >删除</el-button
          >
          <el-button
            :icon="Edit"
            link
            type="success"
            size="small"
            @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--添加部门 -->
    <el-dialog v-model="state.groupDialogVisible" title="添加部门" width="500">
      <el-form
        :model="state.groupForm"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item label="部门名称">
          <el-input v-model="state.groupForm.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="state.groupDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addGroup"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑部门对话框 -->
    <el-dialog
      v-model="state.EditGroupDialogVisible"
      title="编辑部门"
      width="500"
    >
      <el-form
        :model="state.editGroupForm"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item label="部门名称">
          <el-input v-model="state.editGroupForm.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="state.EditGroupDialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="editGroup"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
